<template>
	<div class="history flex-page-wrapper">
		<uni-nav-bar statusBar color="" backgroundColor="#fff" :title="$t('login.real.6s5a37')">
		</uni-nav-bar>
		<div class="flex-page">
			<h4>{{ $t('login.real.833d1c') }}</h4>
			<uni-forms :modelValue="form" ref="form">
				<uni-forms-item class="history-item" :label="$t('login.history.ot0e2w')" name="name" required :rules="[{ required: true, errorMessage: $t('login.real.r17u7i'), trigger: 'blur' }]">
					<uni-easyinput v-model="form.name" :placeholder="$t('login.real.r17u7i')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.real.c0irds')" name="identityType" required :rules="[{ required: true, errorMessage: $t('login.real.e2vl6x'), trigger: 'blur' }]">
					<dict-select v-model="form.identityType" :options="zd.cert && zd.cert.filter(x => En ? x.value != 'identity_card' : true)" :placeholder="$t($t('login.real.e2vl6x'))"></dict-select>
				</uni-forms-item>
				<uni-forms-item class="history-item" :label="$t('login.real.55c38h')" name="identityCard" required :rules="[{ required: true, errorMessage: $t('login.real.307455'), trigger: 'blur' }]">
					<uni-easyinput v-model="form.identityCard" :placeholder="$t('login.real.307455')"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</div>
		<div class="btns">
			<!-- <div class="login3" @click="checked = !checked">
        <span class="check" :class="checked ? 'checked' : ''"></span>
        {{ $t('login.index.357394-0') }}
        <span class="login3-1" @click.stop="() => $refs.gzZcRef.getGz()">{{ $t('login.index.357394-1') }}</span>
        {{ $t('login.index.357394-2') }}
        <span class="login3-1" @click.stop="$refs.gzZcRef.getGz('privacy_rule')">{{ $t('login.index.357394-3') }}</span>
      </div> -->
			<div class="btn active" @click="submit" v-if="checked">{{ $t('login.history.646utw') }}</div>
			<div class="btn disabled" v-else>{{ $t('login.history.646utw') }}</div>
		</div>
		<!-- <pub-zc-gz ref="gzZcRef" @close="zcAgreeHandle" /> -->
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import PubZcGz from '@/components/pub-zc-gz.vue'

	export default {
		components: {
			PubZcGz
		},
		data() {
			return {
				form: {
					name: '',
					identityType: '',
					identityCard: '',
				},
				checked: true,
				phone: '',
				phoneCnyCode: '',
				authCode: '',
				inviteCode: ''
			}
		},
		onLoad(query) {
			this.phone = query.phone
			this.phoneCnyCode = query.phoneCnyCode
			this.authCode = query.authCode
			this.inviteCode = query.inviteCode
		},
		methods: {
			zcAgreeHandle(t) {
				this.checked = true
			},
			submit() {
				uni.setStorageSync('validateData', '')
				this.$refs.form.validate(valid => {
					if (!valid) {
						const params = {
							"authCode": this.authCode,
							"identityCard": this.form.identityCard,
							"identityType": this.form.identityType,
							"name": this.form.name,
							"photoImgUrl": ""
						}
						protal.personidentityVerification(params).then(res => {
							if (res.code === '0000') {
								uni.navigateTo({
									url: `/pages/login/register?name=${ this.form.name }&identityType=${ this.form.identityType }&identityCard=${ this.form.identityCard }&phone=${ this.phone }&phoneCnyCode=${ this.phoneCnyCode }&authCode=${ this.authCode }&isReal=1&inviteCode=${ this.inviteCode }`
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.history {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		.flex-page {
			flex: 1;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
		}

		h3 {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 48rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}

		h4 {
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 28rpx;
			color: #656565;
			line-height: 36rpx;
			font-weight: normal;
			text-align: center;
			font-style: normal;
			padding: 0 30rpx;
			margin: 20rpx 0 80rpx;
		}

		.history-item {
			padding: 0 40rpx;
			margin-bottom: 36rpx;

			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 40rpx;
				color: #676767;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
			}

			/deep/ .el-form-item__label {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 30rpx;
				color: #181818;
				line-height: 30rpx;
				font-style: normal;
				display: flex;
			}

			/deep/ .el-select {
				width: 100%;
			}

			/deep/ .el-input {
				margin-top: 20rpx;

				.el-input__inner {
					height: 88rpx;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 30rpx;
					color: #000;
					line-height: 1;
					font-style: normal;
					border-radius: 12rpx;
				}
			}
		}

		.btns {
			padding-bottom: calc(env(safe-area-inset-bottom) + 20px);

			.login3 {
				width: 670rpx;
				margin: 0 auto 14px;
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 13px;
				color: #181818;
				line-height: 19px;
				height: 19px;
				text-align: left;
				font-style: normal;

				.check {
					width: 14px;
					height: 14px;
					border-radius: 50%;
					border: 1px solid RGBA(153, 153, 153, 1);
					display: inline-block;
					transform: translateY(2px);
					position: relative;
					z-index: 1;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						width: 200%;
						height: 20px;
					}

					&.checked {
						border-color: #4D84FF;
						background: #4D84FF;
						position: relative;

						&::after {
							content: "";
							box-sizing: content-box;
							border: 1px solid #FFF;
							border-left: 0;
							border-top: 0;
							height: 7px;
							left: 4px;
							position: absolute;
							top: 1px;
							transform: rotate(45deg);
							width: 3px;
							transition: -webkit-transform .15s ease-in .05s;
							transition: transform .15s ease-in .05s;
							transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
							transform-origin: center;
						}
					}
				}

				.login3-1 {
					color: rgba(23, 57, 214, 1);
				}
			}

			.btn {
				width: 670rpx;
				height: 88rpx;
				background: rgba(0, 0, 50, 0.1);
				border-radius: 44rpx;
				margin: 28rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_2_65_Medium;
				font-size: 32rpx;
				color: #000000;
				line-height: 40rpx;
				font-style: normal;

				&.active {
					background: #784DFF;
					color: #fff;
				}
			}
		}
	}
</style>